<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>西湖音乐播放器</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: url('https://gitee.com/lsls1/work-jsp/raw/master/xihu_night.jpg') no-repeat center center fixed;
            background-size: cover;
            backdrop-filter: blur(4px);
            color: white;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .player-container {
            max-width: 600px;
            margin-top: 150px;
            padding: 30px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
            text-align: center;
        }

        h1 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        audio {
            width: 100%;
            height: 50px;
            border-radius: 8px;
        }

        footer {
            margin-top: 40px;
            font-size: 0.9rem;
            opacity: 0.7;
        }
    </style>
</head>
<body>

<div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="player-container">
        <h1>正在播放：月色倒影在西湖.mp3</h1>
        <audio controls>
            <source src="playMusic" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
    </div>
</div>

<footer class="text-center w-100">
    <p>&copy; 2025 学生信息管理系统 | 音乐来自网络资源</p>
</footer>

<!-- 引入 Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>